/* eslint-disable radix */
/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {
  StyleSheet,
  Dimensions,
  View,
  Text,
  TouchableOpacity,
  StatusBar,
  Button,
  Animated,
  PanResponder,
  BackHandler,
  ToastAndroid,
} from 'react-native';
import {NodePlayerView} from 'react-native-nodemediaclient';
import Orientation from 'react-native-orientation';
import Icon from 'react-native-vector-icons/FontAwesome';
import AIcon from 'react-native-vector-icons/AntDesign';
import DatePicker from 'react-native-datepicker';
import MultiSlider from '@ptomasroos/react-native-multi-slider';
import {Immersive} from 'react-native-immersive';
type Props = {};
const formatDate = (date) => {
  // 转换时间
  const y = date.getFullYear();
  let M = date.getMonth() + 1;
  M = M < 10 ? '0' + M : M;
  let d = date.getDate();
  d = d < 10 ? '0' + d : d;
  let h = date.getHours();
  h = h < 10 ? '0' + h : h;
  let m = date.getMinutes();
  m = m < 10 ? '0' + m : m;
  let s = date.getSeconds();
  s = s < 10 ? '0' + s : s;
  return y + '-' + M + '-' + d + ' ' + h + ':' + m + ':' + s;
};
// 屏幕宽高
let screenWidth = Dimensions.get('window').width;
let screenHeight = Dimensions.get('window').height;
let drawerWidth = screenHeight * 0.4;
let drawerHeight = screenWidth;

let etime = formatDate(new Date());
let stime = formatDate(new Date(new Date().getTime() - 60000 * 5));
let maxdate = formatDate(new Date());

export default class PlayView extends Component<Props> {
  constructor(props) {
    super(props);
    this.panResponder = {};
    this.state = {
      islive: true,
      isOpen: true,
      starttime: stime,
      endtime: etime,
      pstime: 0,
      petime: 60000,
      timer: null,
      isstop: false,
      url: 'rtmp://192.168.1.78:1935/live/5ba93bf5f1a7d1cb',
      disable: true,
      timechoose: 1,
      history: true,
    };

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponderCapture: (evt, gestureState) => {
        // 在触摸事件 开始，RN父布局组件会回调 onStartShouldSetResponderCapture，询问是否要拦截事件，自己接收处理， true 表示拦截。
        console.log('onStartShouldSetPanResponderCapture');
        console.log(gestureState.dx);
        return false;
      },
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
        // 在触摸 滑动 事件时，RN父布局组件会回调 onMoveShouldSetResponderCapture，询问是否要拦截事件，自己接收处理， true 表示拦截。
        console.log('onMoveShouldSetPanResponderCapture');
        console.log(gestureState);
        return false;
      },
      onStartShouldSetPanResponder: (evt, gestureState) => {
        /**
         * 在手指触摸开始时申请成为响应者
         */
        console.log('onStartShouldSetPanResponder');
        console.log(gestureState);
        return true;
      },
      onMoveShouldSetPanResponder: (evt, gestureState) => {
        /**
         * 在手指在屏幕移动时申请成为响应者
         */
        console.log('onMoveShouldSetPanResponder');
        console.log(gestureState);
        return true;
      },
      // onPanResponderGrant: (evt, gestureState) => {
      //     //开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
      //     /**
      //      * 申请成功，组件成为了事件处理响应者，这时组件就开始接收后序的触摸事件输入。
      //      * 一般情况下，这时开始，组件进入了激活状态，并进行一些事件处理或者手势识别的初始化
      //      */
      //     console.log('onPanResponderGrant')
      //     console.log(gestureState)
      // },
      // onPanResponderReject: (evt, gestureState) => {
      //     /**
      //      * 表示申请失败了，这意味者其他组件正在进行事件处理，
      //      * 并且它不想放弃事件处理，所以你的申请被拒绝了，后续输入事件不会传递给本组件进行处理。
      //      */
      //     console.log('onPanResponderReject')
      // },
      // onPanResponderStart:(evt, gestureState) => {
      //     /**
      //      * 表示手指按下时，成功申请为事件响应者的回调
      //      */
      //     console.log('onPanResponderStart')
      //     console.log(gestureState)
      // },
      onPanResponderMove: (evt, gestureState) => {
        //最近一次的移动距离为gestureState.move{X,Y}

        // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
        /**
         * 表示触摸手指移动的事件，这个回调可能非常频繁，所以这个回调函数的内容需要尽量简单
         */
        console.log('onPanResponderMove');
        if (gestureState.x0 > 600 && gestureState.dx < -60) {
          this.animatedBox(true);
        }
        if (gestureState.x0 > 60 && gestureState.dx > 60) {
          this.animatedBox(false);
        }
      },

      onPanResponderRelease: (evt, gestureState) => {
        //用户放开了所有的触摸点，且此时视图已经成为了响应者。
        //一般来说这个意味着一个手势操作已经完成了。
        /**
         * 表示触摸完成（touchUp）的时候的回调，表示用户完成了本次的触摸交互，这里应该完成手势识别的处理，
         * 这以后，组件不再是事件响应者，组件取消激活
         */
        console.log('onPanResponderRelease');
        console.log(gestureState);
      },
      // onPanResponderEnd:(evt, gestureState) => {
      //     /**
      //      * 组件结束事件响应的回调
      //      */
      //     console.log('onPanResponderEnd')
      //     console.log(gestureState)
      // },

      // onResponderTerminationRequest: (evt) => {
      //     /**
      //      * 当其他组件申请成为响应者时，询问你是否可以释放响应者角色让给其他组件
      //      */
      //     console.log('onResponderTerminationRequest');
      //     return true;
      // },

      // onResponderTerminate: (evt) => {
      //     /**
      //      * 如果 onResponderTerminationRequest 回调函数返回为 true，
      //      * 则表示同意释放响应者角色，同时会回调如下函数，通知组件事件响应处理被终止
      //      * 这可能是由于其他View通过onResponderTerminationRequest请求的，也可能是由操作系统强制夺权（比如iOS上的控制中心或是通知中心）。
      //      */
      //     console.log('onResponderTerminate');
      // }
    });
  }
  componentDidMount() {
    this.setState({history: this.props.route.params.history});

    BackHandler.addEventListener(
      'hardwareBackPress',
      this.onBackButtonPressAndroid,
    );
  }
  componentWillUnmount() {
    BackHandler.removeEventListener(
      'hardwareBackPress',
      this.onBackButtonPressAndroid,
    );
  }
  onBackButtonPressAndroid = () => {
    this.vb.stop();
    Orientation.lockToPortrait();
    // Immersive.off();
    // Immersive.setImmersive(false);
    // this.props.navigation.goBack();
  };
  UNSAFE_componentWillMount = () => {
    this.animatedRight = new Animated.Value(-drawerWidth);
    this.closeRight = new Animated.Value(0);
  };
  animatedBox = (flag) => {
    //侧边栏动画
    if (this.state.history) {
      let targerRight = 0;
      if (!flag) {
        targerRight = -drawerWidth;
      }
      Animated.spring(this.animatedRight, {
        toValue: targerRight,
        duration: 500,
      }).start();
    }
  };
  checkLive() {
    // 切换直播
    this.vb.stop();
    this.setState({
      url: 'rtmp://192.168.1.78:1935/live/5ba93bf5f1a7d1cb',
      islive: true,
    });
    this.vb.start();
  }
  submit() {
    // 确定日期
    let start = this.timeParam(this.state.starttime);
    let end = this.timeParam(this.state.endtime);
    let ptime =
      new Date(this.parserDateString(this.state.endtime)).getTime() -
      new Date(this.parserDateString(this.state.starttime)).getTime();
    this.setState({petime: ptime, pstime: 0});
    this.reloadVideo(start, end);
    this.animatedBox(false);
  }
  reset() {
    // 重置按钮
    this.setState({
      starttime: stime,
      endtime: etime,
      disable: true,
      timechoose: 1,
    });
  }
  reloadVideo(start, end) {
    //重新播放
    clearInterval(this.state.timer);
    this.setState({
      timer: null,
    });
    this.vb.stop();
    this.setState({
      url: `rtsp://admin:admin123456@192.168.0.139:554/Streaming/tracks/101?starttime=${start}&endtime=${end}`,
      islive: false,
    });
    this.vb.start();
    this.time();
  }
  time() {
    //计时器
    this.setState({
      timer: setInterval(() => {
        let t = this.state.pstime + 1000;
        this.setState({pstime: t});
      }, 1000),
    });
  }
  timeParam(time) {
    //转换为需要的参数
    var str = '';
    let t = time.replace(' ', 't') + 'z';
    var arr = new Array();
    for (var i = 0; i < t.length; i++) {
      if (t[i] !== '-' && t[i] !== ':') {
        arr.push(i);
      }
    }
    for (var j = 0; j < arr.length; j++) {
      str = str + t[arr[j]];
    }
    console.log('"' + str + '"');
    return str;
  }

  checkoutprogress(val) {
    // 拖动进度条
    let start = this.timeParam(
      formatDate(
        new Date(
          new Date(this.parserDateString(this.state.starttime)).getTime() +
            val[0],
        ),
      ),
    );
    let end = this.timeParam(this.state.endtime);
    this.reloadVideo(start, end);
    this.setState({pstime: val[0]});
  }
  parserDateString(dateString) {
    //转成date类
    if (dateString) {
      let regEx = new RegExp('\\-', 'gi');
      let validDateStr = dateString.replace(regEx, '/');
      let milliseconds = Date.parse(validDateStr);
      return new Date(milliseconds);
    }
  }
  zero(num) {
    //补0
    if (num < 10) {
      return '0' + num;
    } else {
      return num;
    }
  }
  MillisecondToDate(msd) {
    //  毫秒 转换 小时:分钟:秒
    var time = parseFloat(msd) / 1000;
    if (time != null && time != '') {
      if (time > 60 && time < 60 * 60) {
        time =
          '00:' +
          this.zero(parseInt(time / 60.0)) +
          ':' +
          this.zero(
            parseInt((parseFloat(time / 60.0) - parseInt(time / 60.0)) * 60),
          );
      } else if (time >= 60 * 60 && time < 60 * 60 * 24) {
        time =
          this.zero(parseInt(time / 3600.0)) +
          ':' +
          this.zero(
            parseInt(
              (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60,
            ),
          ) +
          ':' +
          this.zero(
            parseInt(
              (parseFloat(
                (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60,
              ) -
                parseInt(
                  (parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60,
                )) *
                60,
            ),
          );
      } else {
        time = '00:00:' + this.zero(parseInt(time));
      }
    } else {
      time = '00:00:00';
    }
    return time;
  }
  videoStop() {
    // 暂停
    if (this.state.isstop) {
      let start = this.timeParam(
        formatDate(
          new Date(
            new Date(this.parserDateString(this.state.starttime)).getTime() +
              this.state.pstime,
          ),
        ),
      );
      let end = this.timeParam(this.state.endtime);
      this.setState({isstop: false});
      this.reloadVideo(start, end);
    } else {
      this.setState({isstop: true});

      clearInterval(this.state.timer);
      this.setState({
        timer: null,
      });
      this.vb.stop();
    }
  }
  Choose(num) {
    let start;
    switch (num) {
      case 1:
        start = formatDate(
          new Date(this.parserDateString(etime).getTime() - 60000 * 5),
        );
        this.setState({
          disable: true,
          timechoose: num,
          starttime: start,
          endtime: etime,
        });
        break;
      case 2:
        start = formatDate(
          new Date(this.parserDateString(etime).getTime() - 60000 * 10),
        );
        this.setState({
          disable: true,
          timechoose: num,
          starttime: start,
          endtime: etime,
        });
        break;
      case 3:
        start = formatDate(
          new Date(this.parserDateString(etime).getTime() - 60000 * 30),
        );
        this.setState({
          disable: true,
          timechoose: num,
          starttime: start,
          endtime: etime,
        });
        break;
      case 4:
        this.setState({
          disable: false,
          timechoose: num,
          starttime: stime,
          endtime: etime,
        });
        break;

      default:
        break;
    }
  }
  icon() {
    if (this.state.isstop) {
      return <AIcon name={'playcircleo'} size={24} color={'#fff'} />;
    } else {
      return <AIcon name={'pausecircleo'} size={24} color={'#fff'} />;
    }
  }
  progress() {
    if (!this.state.islive) {
      return (
        <View style={styles.progressbox}>
          <TouchableOpacity
            onPress={() => {
              this.videoStop();
            }}>
            {this.icon()}
          </TouchableOpacity>

          <Text style={{color: '#fff'}}>
            {this.MillisecondToDate(this.state.pstime)}
          </Text>

          <MultiSlider
            onValuesChangeFinish={(val) => {
              this.checkoutprogress(val);
            }}
            onValuesChangeStart={() => {
              clearInterval(this.state.timer);
              this.setState({
                timer: null,
              });
            }}
            values={[this.state.pstime]}
            step={1000}
            sliderLength={420}
            min={0}
            max={this.state.petime}
            trackStyle={{height: 4, borderRadius: 3}}
            selectedStyle={{backgroundColor: '#426CFF'}}
            markerStyle={{
              backgroundColor: '#426CFF',
              opacity: 1,
              width: 16,
              height: 16,
              top: 3,
            }}
          />
          <Text style={{color: '#fff'}}>
            {this.MillisecondToDate(this.state.petime)}
          </Text>
          <Text style={{color: '#fff'}}>1.0X</Text>
          <AIcon name={'star'} size={24} color={'#F5A623'} />
        </View>
      );
    } else {
      return null;
    }
  }
  Chooseicon(flag) {
    if (flag) {
      return (
        <Text style={styles.chooseicon}>
          <AIcon name={'check'} size={8} color={'#fff'} />
        </Text>
      );
    } else {
      return null;
    }
  }
  checkbtn() {
    if (this.state.history) {
      return (
        <View style={styles.right}>
          <TouchableOpacity
            style={
              this.state.islive ? styles.btnStyle : styles.btnnoborderStyle
            }
            onPress={() => {
              this.checkLive();
            }}>
            <Text style={{fontSize: 18, color: '#fff'}}> 实时 </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={
              !this.state.islive ? styles.btnStyle : styles.btnnoborderStyle
            }
            onPress={() => {
              this.animatedBox(true);
            }}>
            <Text style={{fontSize: 18, color: '#fff'}}> 历史 </Text>
          </TouchableOpacity>
        </View>
      );
    } else {
      return null;
    }
  }
  render() {
    // const { url, name } = this.props.video;
    // console.log(drawerWidth, drawerHeight);
    // Immersive.on();
    // Immersive.setImmersive(true);
    const {params} = this.props.route;
    const animatedStyle = {right: this.animatedRight};
    Orientation.lockToLandscapeLeft();
    return (
      <View style={styles.container} {...this.panResponder.panHandlers}>
        {/* 隐藏状态栏 */}
        <StatusBar hidden={true} animated={true} translucent={true} />
        <NodePlayerView
          style={styles.fullScreen}
          ref={(vb) => {
            this.vb = vb;
          }}
          inputUrl={this.state.url}
          scaleMode={'ScaleToFill'}
          bufferTime={300}
          controls={true}
          maxBufferTime={1000}
          autoplay={true}
        />
        {/* 进度条 */}
        {this.progress()}
        {/* 返回箭头 */}
        <View style={styles.left}>
          <TouchableOpacity
            style={styles.leftbtn}
            onPress={() => {
              this.vb.stop();
              Orientation.lockToPortrait();
              // Immersive.off();
              // Immersive.setImmersive(false);
              this.props.navigation.goBack();
            }}>
            <Icon name={'angle-left'} size={24} color={'#fff'} />

            <Text style={styles.volumeControl}>{params.name}</Text>
          </TouchableOpacity>
        </View>
        {/* 切换按钮 */}
        {this.checkbtn()}

        {/* 抽屉面板 */}
        <Animated.View style={[styles.drawer, animatedStyle]}>
          <View style={styles.drawertext}>
            <Text style={{fontSize: 16, color: '#fff'}}>选择时间段</Text>
            <View>
              <View
                style={{
                  position: 'absolute',
                  justifyContent: 'space-between',
                  flexDirection: 'row',
                  width: 240,
                }}>
                <View
                  style={
                    this.state.timechoose === 1
                      ? styles.timebtnchoose
                      : styles.timebtn
                  }>
                  <Text
                    onPress={() => {
                      this.Choose(1);
                    }}
                    style={
                      this.state.timechoose === 1
                        ? styles.timetextchoose
                        : styles.timetext
                    }>
                    最近5分钟
                  </Text>
                  {this.Chooseicon(this.state.timechoose === 1)}
                </View>
                <View
                  style={
                    this.state.timechoose === 2
                      ? styles.timebtnchoose
                      : styles.timebtn
                  }>
                  <Text
                    onPress={() => {
                      this.Choose(2);
                    }}
                    style={
                      this.state.timechoose === 2
                        ? styles.timetextchoose
                        : styles.timetext
                    }>
                    最近10分钟
                  </Text>
                  {this.Chooseicon(this.state.timechoose === 2)}
                </View>
              </View>
              <View
                style={{
                  position: 'absolute',
                  top: 40,
                  justifyContent: 'space-between',
                  flexDirection: 'row',
                  width: 240,
                }}>
                <View
                  style={
                    this.state.timechoose === 3
                      ? styles.timebtnchoose
                      : styles.timebtn
                  }>
                  <Text
                    onPress={() => {
                      this.Choose(3);
                    }}
                    style={
                      this.state.timechoose === 3
                        ? styles.timetextchoose
                        : styles.timetext
                    }>
                    最近30分钟
                  </Text>
                  {this.Chooseicon(this.state.timechoose === 3)}
                </View>
                <View
                  style={
                    this.state.timechoose === 4
                      ? styles.timebtnchoose
                      : styles.timebtn
                  }>
                  <Text
                    style={
                      this.state.timechoose === 4
                        ? styles.timetextchoose
                        : styles.timetext
                    }
                    onPress={() => {
                      this.Choose(4);
                    }}>
                    自定义
                  </Text>
                  {this.Chooseicon(this.state.timechoose === 4)}
                </View>
              </View>
            </View>

            <View
              style={{
                opacity: 1,
                position: 'absolute',
                width: 240,
                top: 130,
              }}>
              <View
                style={{
                  justifyContent: 'space-between',
                  flexDirection: 'row',
                  alignItems: 'center',
                  borderBottomColor: 'rgba(255,255,255,0.1)',
                  borderBottomWidth: 1,
                  marginBottom: 20,
                }}>
                <Text style={{color: '#fff'}}>开始时间</Text>
                <DatePicker
                  style={{width: 150}}
                  disabled={this.state.disable}
                  customStyles={{
                    dateInput: {
                      borderWidth: 0,
                      borderColor: 'transparent',
                      paddingLeft: 0,
                      paddingRight: 0,
                      backgroundColor: 'transparent',
                    },
                    dateText: {
                      color: '#fff',
                    },
                    disabled: {
                      backgroundColor: 'transparent',
                      opacity: 0.5,
                    },
                  }}
                  date={this.state.starttime}
                  mode="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  maxDate={maxdate}
                  confirmBtnText="确定"
                  cancelBtnText="取消"
                  showIcon={false}
                  onDateChange={(datetime) => {
                    this.setState({starttime: datetime});
                  }}
                />
              </View>
              <View
                style={{
                  justifyContent: 'space-between',
                  flexDirection: 'row',
                  alignItems: 'center',
                  borderBottomColor: 'rgba(255,255,255,0.1)',
                  borderBottomWidth: 1,
                }}>
                <Text style={{color: '#fff'}}>结束时间</Text>
                <DatePicker
                  style={{width: 150}}
                  disabled={this.state.disable}
                  customStyles={{
                    dateInput: {
                      borderWidth: 0,
                      borderColor: 'transparent',
                      paddingLeft: 0,
                      paddingRight: 0,
                      backgroundColor: 'transparent',
                    },
                    dateText: {
                      color: '#fff',
                    },
                    disabled: {
                      backgroundColor: 'transparent',
                      opacity: 0.5,
                    },
                  }}
                  date={this.state.endtime}
                  mode="datetime"
                  maxDate={maxdate}
                  minDate={this.state.starttime}
                  format="YYYY-MM-DD HH:mm:ss"
                  confirmBtnText="确定"
                  cancelBtnText="取消"
                  showIcon={false}
                  onDateChange={(datetime) => {
                    this.setState({endtime: datetime});
                  }}
                />
              </View>
            </View>
            <View
              style={{
                opacity: 1,
                position: 'absolute',
                width: 240,
                top: 300,
                justifyContent: 'space-between',
                flexDirection: 'row',
              }}>
              <View style={{width: 110, height: 44, color: '#fff'}}>
                <Button
                  title="重置"
                  color="#1D40A6"
                  style={{height: 44}}
                  onPress={() => {
                    this.reset();
                  }}
                />
              </View>

              <View style={{width: 110, height: 44, color: '#fff'}}>
                <Button
                  style={{height: 44}}
                  title="确定"
                  color="#4363FF"
                  onPress={() => {
                    this.submit();
                  }}
                />
              </View>
            </View>
          </View>
        </Animated.View>
      </View>
    );
  }
  componentWillMount() {
    this.setState({url: this.props.route.params.url});
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    flex: 1,
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    // paddingLeft: -34,

    backgroundColor: '#000',
  },
  fullScreen: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    width: screenHeight + 80,
  },
  left: {
    position: 'absolute',
    top: 40,
    left: 20,
    right: 40,
    paddingLeft: 10,
    paddingTop: 25,
    justifyContent: 'flex-start',
    flexDirection: 'row',
  },
  leftbtn: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    justifyContent: 'flex-start',
    flexDirection: 'row',
  },
  right: {
    position: 'absolute',
    top: 10,
    left: 40,
    right: 15,
    paddingLeft: 10,
    paddingTop: 25,
    color: '#fff',
    justifyContent: 'flex-end',
    flexDirection: 'row',
  },
  volumeControl: {
    fontSize: 18,
    color: '#fff',
    marginLeft: 5,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
  },
  btnStyle: {
    marginRight: 5,
    backgroundColor: 'transparent',
    borderColor: '#fff',
    borderRadius: 20,
    color: '#fff',
    borderWidth: 2,
    paddingLeft: 5,
    paddingRight: 5,
    paddingBottom: 1,
    paddingTop: 1,
  },
  timebtn: {
    backgroundColor: 'transparent',
    borderColor: '#E9E9E9',

    width: 110,
    height: 30,
    borderRadius: 2,
    opacity: 0.6,
    borderWidth: 1,

    marginTop: 15,
    marginRight: 20,
  },
  timetext: {
    textAlign: 'center',
    lineHeight: 30,
    color: '#E9E9E9',
  },
  timebtnchoose: {
    backgroundColor: 'transparent',
    borderColor: '#4363FF',
    width: 110,
    height: 30,
    borderRadius: 2,
    opacity: 1,
    borderWidth: 1,
    marginTop: 15,
    marginRight: 20,
  },
  timetextchoose: {
    color: '#fff',
    lineHeight: 30,
    textAlign: 'center',
  },
  chooseicon: {
    borderTopColor: 'transparent', //下箭头颜色
    borderLeftColor: 'transparent', //右箭头颜色
    borderBottomColor: '#4363FF', //上箭头颜色
    borderRightColor: '#4363FF', //左箭头颜色
    borderWidth: 6,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    position: 'absolute',
    textAlign: 'right',
    right: 0,
    lineHeight: 17,
    bottom: 0,
  },
  btnnoborderStyle: {
    marginRight: 5,
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderWidth: 2,
    borderRadius: 20,
    color: '#fff',
    paddingLeft: 5,
    paddingRight: 5,
    paddingBottom: 1,
    paddingTop: 1,
  },
  drawer: {
    width: drawerWidth,
    height: drawerHeight,
    backgroundColor: '#000',
    opacity: 0.8,
    position: 'absolute',
    right: 0,
    top: 0,
  },
  drawertext: {
    position: 'absolute',
    marginLeft: 20,
    marginTop: 30,
  },
  progressbox: {
    position: 'absolute',
    bottom: 0,
    width: screenHeight,
    backgroundColor: 'transparent',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingLeft: 30,
    paddingRight: 30,
    alignItems: 'center',
  },
});
